<template>
  <div class="app-wrapper">
    <transition>
    <!-- <transition :name="mainName"> -->
        <keep-alive v-if="$route.meta.keepAlive">
          <router-view id="view" v-if="$route.meta.keepAlive" />
        </keep-alive>
        <router-view v-else-if="!$route.meta.keepAlive && isRouterAlive" id="view" />
    </transition>
    <!-- 底部导航 -->
    <!-- <transition :name="navName"> -->
    <transition>
      <footer-nav
        v-if="isShowNav"
        :activeNavIndex="activeNavIndex"
      ></footer-nav>
    </transition>
  </div>
</template>
<script>
import { defineComponent } from "vue";
import FooterNav from "./components/FooterNav/index.vue";
export default defineComponent({
  data() {
    return {
      mainName: "", // 内容区域动画名
      navName: "", // 导航动画名
      isShowNav: false, // 是否显示底部导航 Tab
      activeNavIndex: 0, // 底部导航激活下标
      isRouterAlive: true, // 用于刷新页面用
      navTabs: ["Home", "Category", "Cart", "User"], // 底部导航
    };
  },
  watch: {
    activeNavIndex(newValue) {
      if (newValue === 0) {
        this.$router.push("/home");
      }
    },
    $route(to, from) {
      debugger;
      const { navTabs } = this.$data;
      const toName = to.name;
      const fromName = from.name;

      // 如果是在 navTab 页面内刷新浏览器或初始进入系统，则显示导航栏
      if (navTabs.includes(toName) && !fromName) this.isShowNav = true;
      switch (toName) {
        case "Home":
          this.activeNavIndex = 0;
          break;
        case "Category":
          this.activeNavIndex = 1;
          break;
        case "Cart":
          this.activeNavIndex = 2;
          break;
        case "User":
          this.activeNavIndex = 3;
          break;
      }
      /* 判断footer-nav是否显示
       * 根据meta.index判断页面向左滑动 or 向右滑动
       */
      // 判断是否是底部导航之间相互切换
      if (navTabs.includes(toName) && navTabs.includes(fromName)) {
        this.mainName = "fade";
        this.isShowNav = true;
        // 如果 to 索引大于 from 索引, 判断为前进状态, 反之则为后退状态
      } else if (to.meta.index > from.meta.index) {
        this.mainName = "slide-left";
        this.navName = "nav-slide";
        this.isShowNav = false;
      } else if (to.meta.index < from.meta.index) {
        this.mainName = "slide-right";
        this.navName = "nav-slide";
        navTabs.includes(toName) && (this.isShowNav = true);
      }
    },
  },
  components: {
    "footer-nav": FooterNav,
  },
  mounted() {
    console.log(this.$route);
  },
  setup() {},
});
</script>

<style lang="scss" scoped>
.app-wrapper {
  font-size: 14px;
}
</style>
